<template>
  <div v-loading="tableLoading">
    <!-- 筛选项 -->
    <el-row :gutter="20" class="gl_searchBox">
      <el-col :span="6" :lg="4">
        <p>赛事名称</p>
        <el-input v-model="form.Filter" placeholder="请输入名称" size="mini" clearable @change="getPageList()" />
      </el-col>
      <el-col :span="6" :lg="4" class="search_btn">
        <el-button type="primary" size="mini" @click="getPageList()">查询</el-button>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <el-row :gutter="20" class="gl_my_15" type="flex" justify="end">
      <el-col v-if="isLeagueAuthor" :span="12">
        <el-button type="primary" size="mini" @click="openAddGame()">创建分站赛</el-button>
        <el-button :disabled="hasFinal" type="warning" size="mini" @click="createFinal()">生成决赛</el-button>
      </el-col>
      <el-col :span="12" class="change_game_icon" align="right">
        <template v-if="showGameType === 'list'">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">平铺</div>
            <i class="el-icon-menu icon_change" @click="changeGameView('view')" />
          </el-tooltip>
        </template>
        <template v-if="showGameType === 'view'">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">列表</div>
            <i class="el-icon-s-operation icon_change" @click="changeGameView('list')" />
          </el-tooltip>
        </template>
      </el-col>
    </el-row>

    <!-- 赛事列表 -->
    <template v-if="showGameType === 'list'">
      <el-table class="gl_mb_15 game_table_list" :data="tableData" stripe size="mini" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column label="赛事logo" align="center" :width="95">
          <template slot-scope="{ row }">
            <img v-if="row.logoImage" class="game_coverimg" :src="getStaticPhotoUrl(row.logoImage)" alt="" @error="errorPhoto">
            <img v-else class="game_coverimg" :src="getStaticPhotoUrl(row.delegation.imagePath)" alt="" @error="errorPhoto">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="赛事名称" :min-width="220">
          <template slot-scope="{ row }">
            <span>{{ row.leagueName ? row.leagueName + '—' : '' }}</span>
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="比赛时间" align="center" :width="170">
          <template slot-scope="{ row }">
            {{ row.startTime && row.startTime.substring(0, 10) }} 到 {{ row.endTime && row.endTime.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="认证等级" align="center" :min-width="160">
          <template slot-scope="{ row }">
            {{ row.competitionCertificationLevelName }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="比赛地址" :width="180" />
        <el-table-column prop="responsiblePersonName" label="负责人" :min-width="140" />
        <el-table-column prop="responsiblePersonPhone" label="联系电话" :width="100" />
        <el-table-column prop="enterDelegationName" label="申请机构" :min-width="180" />
        <el-table-column v-if="!isLeagueAuthor" prop="approveStatusCode" label="审核状态" :width="140">
          <template slot-scope="{ row }">
            <span v-for="ktem in dict.competitionRequestApproveStatus" :key="ktem.code">
              <span v-if="row.approveStatusCode === 'NotApproved'" class="gl_color_warning">
                {{ ktem.code === row.approveStatusCode ? ktem.value : '' }}
              </span>
              <span v-if="row.approveStatusCode === 'ApproveSuccess'" class="gl_color_success">
                {{ ktem.code === row.approveStatusCode ? ktem.value : '' }}
              </span>
              <span v-if="row.approveStatusCode === 'ApproveFailed'" class="gl_color_error">
                {{ ktem.code === row.approveStatusCode ? ktem.value : '' }}
              </span>
            </span>
            <el-divider v-if="row.approveStatusCode == 'ApproveFailed'" direction="vertical" />
            <el-button v-if="row.approveStatusCode == 'ApproveFailed'" size="mini" type="text" @click="showReason(row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('table.actions')" align="left" :width="100">
          <template slot-scope="{ row }">
            <el-button v-if="isLeagueAuthor" size="mini" type="text" @click="openApprove(row)">审核</el-button>
            <el-button v-if="!isLeagueAuthor" :disabled="row.approveStatusCode == 'NotApproved' || row.approveStatusCode == 'ApproveFailed'" size="mini" type="text" @click="editCompetition(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 赛事视图 -->
    <template v-if="showGameType === 'view'">
      <el-row v-if="tableData.length" :gutter="15" class="game_view_list">
        <el-col v-for="(item, index) in tableData" :key="index" :span="8" :lg="6" style="min-width: 335px;" class="gl_mb_15">
          <div class="game_view_item">
            <div class="game_title">
              <img v-if="item.logoImage" class="game_coverimg" :src="getStaticPhotoUrl(item.logoImage)" alt="" @error="errorPhoto">
              <img v-else class="game_coverimg" :src="getStaticPhotoUrl(item.delegation.imagePath)" alt="" @error="errorPhoto">
              <div class="game_status">
                <span class="game_status_item gl_mr_20">
                  <span class="gl_pl_5">申请机构：{{ item.enterDelegationName }}</span>
                </span>
              </div>
              <div class="game_status">
                <span class="game_status_item gl_mr_20">
                  <span class="gl_pl_5">负责人：{{ item.responsiblePersonName }}/{{ item.responsiblePersonPhone }}</span>
                </span>
              </div>
              <div v-if="!isLeagueAuthor" class="game_status gl_mt_5">
                <span v-if="item.approveStatusCode === 'NotApproved'" class="game_status_item gl_bg_warning gl_mr_20" style="color: #fff">
                  <template v-for="ktem in dict.competitionRequestApproveStatus">
                    {{ ktem.code === item.approveStatusCode ? ktem.value : '' }}
                  </template>
                </span>
                <span v-if="item.approveStatusCode === 'ApproveSuccess'" class="game_status_item gl_bg_success gl_mr_20" style="color: #fff">
                  <i class="el-icon-success gl_pr_5" />
                  <template v-for="ktem in dict.competitionRequestApproveStatus">
                    {{ ktem.code === item.approveStatusCode ? ktem.value : '' }}
                  </template>
                </span>
                <span v-if="item.approveStatusCode === 'ApproveFailed'" class="game_status_item gl_bg_error gl_mr_20" style="color: #fff" @click="showReason(item)">
                  <i class="el-icon-error gl_pr_5" />
                  <template v-for="ktem in dict.competitionRequestApproveStatus">
                    {{ ktem.code === item.approveStatusCode ? ktem.value : '' }}
                  </template>
                </span>
              </div>
            </div>
            <div class="game_content">
              <div class="game_view_name gl_ellipsis">
                <span>{{ item.leagueName ? item.leagueName + '—' : '' }}</span>
                <span>{{ item.name }}</span>
              </div>
              <div class="game_view_type gl_mt_10">
                认证等级：{{ item.competitionCertificationLevelName }}
              </div>
              <div class="game_view_play gl_mt_10">
                比赛时间：{{ item.startTime && item.startTime.substring(0, 10) }} 到 {{ item.endTime && item.endTime.substring(0, 10) }}
              </div>
              <div class="game_view_seq gl_mt_10">
                比赛地址：{{ item.address }}
              </div>
            </div>
            <div class="hover_show_message">
              <div class="game_title">
                <div class="game_view_name gl_ellipsis gl_mt_30">
                  <span>{{ item.leagueName ? item.leagueName + '—' : '' }}</span>
                  <span>{{ item.name }}</span>
                </div>
                <div class="game_view_type gl_mt_20">
                  认证等级：{{ item.competitionCertificationLevelName }}
                </div>
                <div class="game_view_play gl_mt_10">
                  比赛时间：{{ item.startTime && item.startTime.substring(0, 10) }} 到 {{ item.endTime && item.endTime.substring(0, 10) }}
                </div>
                <div class="game_view_seq gl_mt_10">
                  比赛地址：{{ item.address }}
                </div>
                <div v-if="!isLeagueAuthor" class="game_status gl_mt_20">
                  <span v-if="item.approveStatusCode === 'NotApproved'" class="game_status_item gl_bg_warning gl_mr_20" style="color: #fff">
                    <template v-for="ktem in dict.competitionRequestApproveStatus">
                      {{ ktem.code === item.approveStatusCode ? ktem.value : '' }}
                    </template>
                  </span>
                  <span v-if="item.approveStatusCode === 'ApproveSuccess'" class="game_status_item gl_bg_success gl_mr_20" style="color: #fff">
                    <i class="el-icon-success gl_pr_5" />
                    <template v-for="ktem in dict.competitionRequestApproveStatus">
                      {{ ktem.code === item.approveStatusCode ? ktem.value : '' }}
                    </template>
                  </span>
                  <span v-if="item.approveStatusCode === 'ApproveFailed'" class="game_status_item gl_bg_error gl_mr_20" style="color: #fff" @click="showReason(item)">
                    <i class="el-icon-error gl_pr_5" />
                    <template v-for="ktem in dict.competitionRequestApproveStatus">
                      {{ ktem.code === item.approveStatusCode ? ktem.value : '' }}
                    </template>
                  </span>
                </div>
              </div>
              <div class="game_content">
                <div class="game_view_seq gl_mt_10">
                  申请机构：{{ item.enterDelegationName }}
                </div>
                <div class="game_view_seq gl_mt_10">
                  负责人：{{ item.responsiblePersonName }}/{{ item.responsiblePersonPhone }}
                </div>
                <el-row :gutter="20">
                  <el-col class="gl_my_10">
                    <el-button v-if="isLeagueAuthor" style="width: 100%" size="mini" type="primary" @click="openApprove(item)">审核</el-button>
                    <el-button v-else :disabled="item.approveStatusCode == 'NotApproved' || item.approveStatusCode == 'ApproveFailed'" style="width: 100%" size="mini" type="primary" @click="editCompetition(item)">编辑</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="24" class="gl_noData_mockTable" />
      </el-row>
    </template>
    <el-row style="text-align: center;" class="gl_pb_15">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="form.MaxResultCount"
        :current-page="form.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>

    <!-- 审核 -->
    <el-dialog
      class="gl_dialog_TitleLine"
      width="520px"
      title="请确认审核状态"
      :visible.sync="approveDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="approveVO" :model="approveVO" label-width="80px" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核状态">
              <el-select v-model="approveVO.approveStatus" placeholder="请选择审核状态" style="width: 100%;">
                <template v-for="item in dict.entryApproveStatus">
                  <el-option v-if="item.code === 'ApproveSuccess' || item.code === 'ApproveFailed'" :key="item.code" :value="item.code" :label="item.value" />
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="驳回原因">
              <el-input
                v-model="approveVO.approveRemark"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入驳回原因"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="approveDialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" :loading="approveBtnLoading" @click="approve">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import defaultGameLogo from '@/assets/images/nodata.png';
import {
  api_GET_EventsManagementCompetitionRequestCompetitionRequestPublishLeagueCompetitionId, // 查询分站赛申请列表(后台发布方)
  api_GET_EventsManagementCompetitionRequestCompetitionRequestApplicantLeagueCompetitionId, // 查询分站赛申请列表(后台申办方)
  api_POST_EventsManagementCompetitionRequestCompetitionRequestApproveSuccessCompetitionRequestId, // 申请审核通过
  api_POST_EventsManagementCompetitionRequestCompetitionRequestApproveFailedCompetitionRequestId // 申请审核驳回
} from '@/extend/api/gameswaggerApi/app';
import {
  Api_GET_EventsManagementCompetitionRequestCompetitionRequestPublishLeagueCompetitionIdQO
} from '@/lib/form/game/swaggerForm';
export default {
  props: {
    isLeagueAuthor: {
      required: true,
      type: Boolean,
      default: false
    },
    hasFinal: {
      required: true,
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultGameLogo: defaultGameLogo,
      form: new Api_GET_EventsManagementCompetitionRequestCompetitionRequestPublishLeagueCompetitionIdQO(),
      approveVO: {
        id: '',
        approveStatus: '',
        approveRemark: ''
      },
      delegationId: '',
      approveDialogVisible: false,
      approveBtnLoading: false,
      showGameType: 'list',
      tableData: [],
      total: 0,
      tableLoading: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      dictAll: state => state.dict.dictAll,
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    currentUserType: {
      handler(val) {
        if (!val) return;
        this.delegationId = val.delegationId;
      }
    }
  },
  created() {
    this.getDict();
    this.delegationId = this.currentUserType.delegationId;
    this.getPageList();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取赛事列表
    getPageList(page) {
      var that = this;
      that.tableLoading = true;
      that.form.Page = page || 1;
      that.form.SkipCount = (that.form.Page - 1) * that.form.MaxResultCount;
      that.form.DelegationId = that.delegationId;
      that.form.ApproveStatusCode = that.isLeagueAuthor ? 'NotApproved' : '';
      that.form.IncludeCertificationLevel = true;
      that.form.IncludeDelegation = true;
      that.form.IncludeLeagueCompetition = true;
      const parentId = that.$route.params.parentId;
      if (that.isLeagueAuthor) {
        api_GET_EventsManagementCompetitionRequestCompetitionRequestPublishLeagueCompetitionId(parentId, that.form).then(res => {
          that.tableLoading = false;
          that.tableData = res.items || [];
          that.total = res.totalCount;
        }, (error) => {
          that.tableLoading = false;
          that.$message({ type: 'error', message: error.error.message || '获取申请列表失败！' });
        });
      } else {
        api_GET_EventsManagementCompetitionRequestCompetitionRequestApplicantLeagueCompetitionId(parentId, that.form).then(res => {
          that.tableLoading = false;
          that.tableData = res.items || [];
          that.total = res.totalCount;
        }, (error) => {
          that.tableLoading = false;
          that.$message({ type: 'error', message: error.error.message || '获取申请列表失败！' });
        });
      }
    },
    // 切换赛事展示的形式 list / view
    changeGameView(type) {
      this.showGameType = type;
    },
    // 创建分站赛
    openAddGame() {
      this.$router.push({
        name: 'SubstationGameAdd'
      });
    },
    // 生成决赛
    createFinal() {
      this.$router.push({
        name: 'SubstationGameAddFinal'
      });
    },
    // 审核
    openApprove(data) {
      this.approveDialogVisible = true;
      this.approveVO = {
        id: '',
        approveStatus: '',
        approveRemark: ''
      };
      this.approveVO.id = data.id;
    },
    // 审核
    approve() {
      if (this.approveVO.approveStatus === 'ApproveFailed' && !this.approveVO.approveRemark) {
        this.$message({ type: 'error', message: '审核状态为审核不通过时，必须填写驳回原因' });
        return;
      }
      this.approveBtnLoading = true;
      if (this.approveVO.approveStatus === 'ApproveFailed') {
        const form = {
          notApprovedCause: this.approveVO.approveRemark
        };
        api_POST_EventsManagementCompetitionRequestCompetitionRequestApproveFailedCompetitionRequestId(this.approveVO.id, form).then(res => {
          this.$message({ type: 'success', message: '操作成功' });
          this.approveBtnLoading = false;
          this.getPageList();
          this.approveDialogVisible = false;
        }, error => {
          this.approveBtnLoading = false;
          this.$message({ type: 'error', message: error.error && error.error.message || '操作失败' });
        });
      } else {
        api_POST_EventsManagementCompetitionRequestCompetitionRequestApproveSuccessCompetitionRequestId(this.approveVO.id).then(res => {
          this.$message({ type: 'success', message: '操作成功' });
          this.approveBtnLoading = false;
          this.getPageList();
          this.approveDialogVisible = false;
        }, error => {
          this.approveBtnLoading = false;
          this.$message({ type: 'error', message: error.error && error.error.message || '操作失败' });
        });
      }
    },
    // 查看驳回原因
    showReason(row) {
      const data = row.notApprovedCause || '暂无原因';
      this.$alert(`${data}`, '驳回原因', {
        confirmButtonText: '确定'
      });
    },
    // 编辑(去完善)
    editCompetition(row) {
      this.$router.push({
        name: 'SubstationGameAdd',
        query: {
          competitionRequestId: row.id,
          status: row.approveStatusCode
        }
      });
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      return process.env.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultGameLogo;
    },
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.form.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>
<style scoped>
.change_game_icon {
  height: 28px;
  line-height: 32px;
}
.change_game_icon .icon_change {
  font-size: 18px;
  width: 24px;
  height: 24px;
  visibility: visible;
  color: #696b6c;
  cursor: pointer;
}
.change_game_icon .icon_change:hover {
  color: #1890ff;
}
.game_table_list .game_coverimg {
  max-width: 74px;
  max-height: 74px;
  border-radius: 50%;
  vertical-align: middle;
}
.dropdown_item {
  margin: 0 -20px;
  padding: 0 20px;
}
.game_view_item {
  position: relative;
  background: #fff;
  border-radius: 4px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.098);
  overflow: hidden;
}
.game_view_item .game_top {
  position: absolute;
  width: 80px;
  height: 16px;
  top: 7px;
  right: 9px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.game_view_item .game_title {
  width: 100%;
  text-align: center;
  padding: 20px 0;
  height: 215px;
  box-sizing: border-box;
}
.game_view_item .game_status_item {
  padding: 3px 8px;
  color: #848484;
  font-size: 12px;
  cursor: pointer;
}
.game_view_item .game_coverimg {
  max-width: 100px;
  max-height: 100px;
  border-radius: 50%;
  margin: 10px 0;
}
.game_view_item .game_content {
  width: 100%;
  height: 140px;
  padding: 20px;
  font-size: 14px;
  color: #848484;
  background: rgba(244, 248, 255, 1);
}
.game_view_item .game_view_name {
  font-size: 16px;
  color: #333;
}
.game_view_item .hover_show_message {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.hover_show_message .game_top {
  position: absolute;
  width: 80px;
  height: 16px;
  top: 7px;
  right: 9px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.game_view_item:hover .hover_show_message {
  top: 0;
}
.hover_show_message .game_title {
  background: rgba(249, 249, 249, 1);
  opacity: 0.9;
  font-size: 14px;
}
.hover_show_message .game_content {
  background: #fff;
}
</style>
